<template>
  <div id="app" @scroll="changeScroll">
    <keep-alive>
      <router-view />
    </keep-alive>
    <p class="jzz" v-show="condition">加载中...</p>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "App",
  data() {
    return {
      echongs: null,
      ter: null,
      condition: false,
      indexxh: 1,
      jlgd: false,
      isScroll: true,
    };
  },
  methods: {
    ...mapActions(["requeApi"]),
    async changeScroll(e) {
      // console.log(this.$route.path);

      if (!this.isScroll) return;
      let sTop = e.target.scrollTop; // 已滚动高度;
      if (sTop && !this.jlgd) {
        this.busvue.$emit("isDong", true);
      }
      if (sTop == 0) {
        this.busvue.$emit("isDong", false);
      }
      let totalHeight = e.target.scrollHeight; // 滚动内容的总高度；
      let cHeight = e.target.clientHeight; // 窗口高度；
      if (sTop + cHeight + 1 >= totalHeight) {
        clearTimeout(this.ter);
        this.condition = true;

        if (this.indexxh == 5) {
          this.busvue.$emit("isend", true);
          this.condition = false;
          return;
        }
        // console.log(sTop + cHeight, "到底了", "*************");
        this.ter = setTimeout(() => {
          if (this.$route.path == "/glsplb") {
            this.busvue.$emit("isendgl", true);
          }
          this.caiLike();
        }, 500);
      }
    },

    async caiLike() {
      this.indexxh++;
      let cLike = await this.axios({
        url: `https://mall.api.epet.com/v3/index/home.html?version=554&leaf=${this.indexxh}&system=wap&isWeb=1&distinct_id=17c2b39bc8d274-022dcac363853b8-17466957-230400-17c2b39bc8e91c&debug_param=`,
      });
      this.busvue.$emit("addcLikes", cLike.data.datas.list[0].data.list);
      this.condition = false;
      // console.log(cLike.data,cLike.data.datas.list[0].data.list,"-----");
      return cLike;
    },
  },
  mounted() {
    this.requeApi();

    // console.log(this.$router);
    // onReady()方法当所有的异步路由加载完毕之后再获取值，如果注册的为异步路由可能造成未加载完毕就获取的现象，此方法可以避免这个问题
    this.$router.onReady(() => {
      // console.log(this.$route);
      // if (this.$route) {

      // }
      if (this.$router.history.current.fullPath == ("/" || "/glsplb")) {
        this.isScroll = true;
      } else {
        this.isScroll = false;
      }
    });
  },
  watch: {
    $route(to, from) {
      if (to.fullPath != ("/" || "/glsplb")) {
        this.isScroll = false;
      }
      if (to.fullPath == ("/" || "/glsplb")) {
        this.isScroll = true;
      }
    },
  },
};
</script>

<style lang="less">
[v-cloak] {
  display: none;
}
.jzz {
  font-size: 0.3rem;
  position: absolute;
  top: 40%;
  left: 37%;
  line-height: 0.6rem;
  text-align: center;
  width: 1.8rem;
  height: 0.6rem;
  background-color: rgb(92, 92, 92);
  border-radius: 0.1rem;
  color: rgb(255, 255, 255);
}
#app {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
}
html {
  font-size: 13.333333vw;
}
.advices {
  width: 0.5rem;
}
a {
  text-decoration: none;
}
img[lazy="loading"] {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto;
}
</style>
